<template>
  <PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
    <BasicTable @register="registerTablePeopleI">
      <template #toolbar>
        <a-button type="primary" @click="handleCreate"> {{ t('sys.configuration.add') }} </a-button>
      </template>
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'action'">
          <TableAction
            :actions="[
              {
                label: t('sys.script.details'),
                tooltip: t('sys.script.details'),
                onClick: handleView.bind(null, record),
              },
            ]"
          />
        </template>
      </template>
    </BasicTable>
    <AccountModal @register="registerModal" @success="handleSuccess" />
    <DetailView @register="registerDetailView" @success="DetailViewSuccess" />
  </PageWrapper>
</template>

<script lang="ts" setup>
  import { message, Tooltip } from 'ant-design-vue';
  import { reactive, ref, computed, h, onMounted, onUnmounted, watch } from 'vue';
  import { Progress } from 'ant-design-vue';
  import { BasicTable, useTable, TableAction } from '@/components/Table';
  import {
    getTasklistAPI,
    stopTaskAPI,
    taskStatusNumApi,
    finishTaskAPI,
    taskMarketPageAPI,
  } from '@/api/demo/InformationMatching';
  import { PageWrapper } from '@/components/Page';
  import { useModal } from '@/components/Modal';
  import AccountModal from './AccountModal.vue';
  import DetailView from './DetailView.vue';
  import phaseView from './phaseView.vue';
  import OnephaseView from './OnephaseView.vue';
  import { searchFormSchema, columnsPeopleI } from './account.data';
  import { useGo } from '@/hooks/web/usePage';
  import { useWebSocketStore } from '@/store/modules/websocket';
  import { useI18n } from "@/hooks/web/useI18n";

  const { t } = useI18n();
  const webSocketStore = useWebSocketStore();

  defineOptions({ name: 'AccountManagement' });

  const go = useGo();
  const [registerModal, { openModal }] = useModal();
  const [registerDetailView, { openModal: openDetailView }] = useModal();
  const total = ref(0);
  const taskStatusData = ref<any[]>([]);

  const tableTitle = computed(() => {
    const statusInfo = taskStatusData.value
      .map((item) => `${item.label}: ${item.value}`)
      .join(', ');
    return `信息匹配 ${t('sys.configuration.common')} ${total.value} ${t('sys.configuration.strip')} (${statusInfo})`;
  });
  const [registerTablePeopleI, { reload: reloadPeopleI }] = useTable({
    title: '广告营销任务',
    api: async (params) => {
      const result = (await taskMarketPageAPI(params)) as { items: any[]; total: number };
      return result;
    },
    rowKey: 'id',
    columns: columnsPeopleI,
    showIndexColumn: false,
    useSearchForm: false,
    showTableSetting: false,
    bordered: true,
    actionColumn: {
      width: 50,
      title: t('sys.configuration.action'),
      dataIndex: 'action',
    },
  });
  

  function handleCreate() {
    openModal(true, {
      isUpdate: false,
    });
  }

  function handleSuccess({ isUpdate, values }) {
    reloadPeopleI();
  }

  function handleView(record: Recordable) {
    openDetailView(true, {
      record,
    });
  }

  function DetailViewSuccess(record: Recordable) {
    // 处理 DetailView 成功后的逻辑
    // openphaseView(true, {
    //   record,
    // });
  }

  async function taskStatusNum() {
    let Data = await taskStatusNumApi();
    taskStatusData.value = Data.data;
  }
</script>
